<template>
    <div class="forum-detail-container">
      <div class="forum-detail-wrapper">
        <!-- 左侧内容区域 -->
        <div class="left-content">
          <!-- 返回按钮 -->
          <div class="back-button" @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            <span>返回</span>
          </div>
  
          <!-- 文章内容 -->
          <div class="post-content-card">
            <div class="post-header">
              <h1 class="post-title">{{ post.title }}</h1>
              <div class="post-meta">
                <div class="post-author">
                  <img :src="post.author.avatar" alt="作者头像" class="author-avatar" />
                  <span class="author-name">{{ post.author.name }}</span>
                </div>
                <div class="post-time">{{ formatDate(post.createTime) }}</div>
              </div>
              <div class="post-tags">
                <span class="tag" v-for="(tag, index) in post.tags" :key="index">{{ tag }}</span>
              </div>
            </div>
  
            <div class="post-content" v-html="post.content"></div>
  
            <!-- 附件列表 -->
            <div class="post-files" v-if="post.files && post.files.length > 0">
              <h3 class="files-title">附件资料</h3>
              <div class="file-list">
                <div class="file-item" v-for="(file, index) in post.files" :key="index">
                  <div class="file-info">
                    <div class="file-name">{{ file.name }}</div>
                    <div class="file-size">大小: {{ file.size }}</div>
                  </div>
                  <div class="file-actions">
                    <el-button type="primary" size="small" @click="downloadFile(file)">
                      <el-icon><Download /></el-icon>
                      下载
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
  
            <!-- 文章底部操作栏 -->
            <div class="post-actions">
              <div class="action-item" @click="toggleLike">
                <el-icon :class="{ 'liked': isLiked }"><Star /></el-icon>
                <span>点赞 {{ post.likes }}</span>
              </div>
              <div class="action-item" @click="scrollToComments">
                <el-icon><ChatDotRound /></el-icon>
                <span>评论 {{ post.comments.length }}</span>
              </div>
              <div class="action-item" @click="sharePost">
                <el-icon><Share /></el-icon>
                <span>分享</span>
              </div>
              <div class="action-item" @click="collectPost">
                <el-icon :class="{ 'collected': isCollected }"><Collection /></el-icon>
                <span>收藏</span>
              </div>
            </div>
          </div>
  
          <!-- 评论区 -->
          <div class="comments-section" ref="commentsSection">
            <h2 class="section-title">评论 ({{ post.comments.length }})</h2>
            
            <!-- 评论输入框 -->
            <div class="comment-input-container">
              <el-input
                v-model="commentContent"
                type="textarea"
                :rows="3"
                placeholder="写下你的评论..."
                :disabled="!isLoggedIn"
              />
              <div class="comment-actions">
                <el-button type="primary" @click="submitComment" :disabled="!isLoggedIn || !commentContent.trim()">
                  发表评论
                </el-button>
                <div class="login-tip" v-if="!isLoggedIn">
                  请先 <span class="login-link" @click="goToLogin">登录</span> 后评论
                </div>
              </div>
            </div>
            
            <!-- 评论列表 -->
            <div class="comment-list" v-if="post.comments.length > 0">
              <div class="comment-item" v-for="(comment, index) in post.comments" :key="index">
                <div class="comment-author">
                  <img :src="comment.author.avatar" alt="评论者头像" class="comment-avatar" />
                  <div class="comment-author-info">
                    <div class="comment-author-name">{{ comment.author.name }}</div>
                    <div class="comment-time">{{ formatDate(comment.createTime) }}</div>
                  </div>
                </div>
                <div class="comment-content">{{ comment.content }}</div>
                <div class="comment-actions">
                  <div class="action-item" @click="likeComment(index)">
                    <el-icon :class="{ 'liked': comment.isLiked }"><ThumbUp /></el-icon>
                    <span>{{ comment.likes || 0 }}</span>
                  </div>
                  <div class="action-item" @click="replyComment(index)">
                    <el-icon><ChatLineRound /></el-icon>
                    <span>回复</span>
                  </div>
                </div>
                
                <!-- 回复列表 -->
                <div class="reply-list" v-if="comment.replies && comment.replies.length > 0">
                  <div class="reply-item" v-for="(reply, replyIndex) in comment.replies" :key="replyIndex">
                    <div class="reply-author">
                      <img :src="reply.author.avatar" alt="回复者头像" class="reply-avatar" />
                      <div class="reply-author-info">
                        <div class="reply-author-name">{{ reply.author.name }}</div>
                        <div class="reply-time">{{ formatDate(reply.createTime) }}</div>
                      </div>
                    </div>
                    <div class="reply-content">
                      <span class="reply-to" v-if="reply.replyTo">@{{ reply.replyTo }}</span>
                      {{ reply.content }}
                    </div>
                    <div class="reply-actions">
                      <div class="action-item" @click="likeReply(index, replyIndex)">
                        <el-icon :class="{ 'liked': reply.isLiked }"><ThumbUp /></el-icon>
                        <span>{{ reply.likes || 0 }}</span>
                      </div>
                      <div class="action-item" @click="replyToReply(index, replyIndex)">
                        <el-icon><ChatLineRound /></el-icon>
                        <span>回复</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 回复输入框 -->
                <div class="reply-input-container" v-if="activeReplyIndex === index">
                  <el-input
                    v-model="replyContent"
                    type="textarea"
                    :rows="2"
                    :placeholder="replyPlaceholder"
                    :disabled="!isLoggedIn"
                  />
                  <div class="reply-actions">
                    <el-button size="small" @click="cancelReply">取消</el-button>
                    <el-button type="primary" size="small" @click="submitReply" :disabled="!isLoggedIn || !replyContent.trim()">
                      回复
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 无评论提示 -->
            <div class="no-comments" v-else>
              暂无评论，快来发表第一条评论吧！
            </div>
          </div>
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="right-content">
          <!-- 作者信息卡片 -->
          <div class="author-card">
            <div class="author-header">
              <img :src="post.author.avatar" alt="作者头像" class="author-avatar-large" />
              <div class="author-name-large">{{ post.author.name }}</div>
              <div class="author-bio">{{ post.author.bio || '这个人很懒，什么都没留下' }}</div>
            </div>
            <div class="author-stats">
              <div class="stat-item">
                <div class="stat-value">{{ post.author.posts }}</div>
                <div class="stat-label">发帖</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ post.author.followers }}</div>
                <div class="stat-label">粉丝</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ post.author.following }}</div>
                <div class="stat-label">关注</div>
              </div>
            </div>
            <div class="author-actions">
              <el-button 
                type="primary" 
                :plain="!isFollowing" 
                @click="toggleFollow"
              >
                {{ isFollowing ? '已关注' : '关注' }}
              </el-button>
              <el-button @click="sendMessage">发消息</el-button>
            </div>
          </div>
          
          <!-- 相关推荐 -->
          <div class="related-posts">
            <h3 class="section-title">相关推荐</h3>
            <div class="related-post-list">
              <div class="related-post-item" v-for="(item, index) in relatedPosts" :key="index" @click="goToPost(item.id)">
                <div class="related-post-title">{{ item.title }}</div>
                <div class="related-post-meta">
                  <span>{{ formatDate(item.createTime) }}</span>
                  <span>{{ item.views }} 浏览</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { 
    ArrowLeft, 
    Star, 
    ChatDotRound, 
    Share, 
    Collection, 
    Download, 
    // ThumbUp, 
    ChatLineRound 
  } from '@element-plus/icons-vue';
//   import * as ElementPlusIconsVue from '@element-plus/icons-vue'

  import { ElMessage } from 'element-plus';
  
  const router = useRouter();
  const route = useRoute();
  
  // 评论区域引用
  const commentsSection = ref(null);
  
  // 用户状态
  const isLoggedIn = ref(true); // 模拟用户已登录状态
  const isLiked = ref(false);
  const isCollected = ref(false);
  const isFollowing = ref(false);
  
  // 评论相关
  const commentContent = ref('');
  const replyContent = ref('');
  const activeReplyIndex = ref(-1);
  const activeReplyToIndex = ref(-1);
  const replyPlaceholder = ref('写下你的回复...');
  
  // 模拟帖子数据
  const post = ref({
    id: 1,
    title: 'GMAT到底是什么样的考试? 为什么要考GMAT？为什么要考GMAT？',
    content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
    <h3>资料 / 活动</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>`,
    createTime: '2023-03-02 14:30:00',
    likes: 2333,
    views: 5678,
    tags: ['资料包', '经验分享', 'GMAT'],
    author: {
      id: 1,
      name: '用户666',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      bio: '努力学习的第333天',
      posts: 444,
      followers: 555,
      following: 66
    },
    files: [
      { name: '文件名称文件名称.zip', size: '45mb', url: '#' },
      { name: '文件名称文件名称.zip', size: '45mb', url: '#' },
      { name: '文件名称文件名称.zip', size: '45mb', url: '#' },
      { name: '文件名称文件名称.zip', size: '45mb', url: '#' },
      { name: '文件名称文件名称.zip', size: '45mb', url: '#' },
      { name: '文件名称文件名称.zip', size: '45mb', url: '#' }
    ],
    comments: [
      {
        id: 1,
        author: {
          id: 2,
          name: '张XX',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        },
        content: '根据霍夫关键词whig propaganda在第二段定位。',
        createTime: '2024-06-23 16:45',
        likes: 2333,
        isLiked: false,
        replies: []
      },
      {
        id: 2,
        author: {
          id: 3,
          name: '张XX',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        },
        content: '根据霍夫关键词whig propaganda在第二段定位。',
        createTime: '2024-06-23 16:45',
        likes: 2333,
        isLiked: false,
        replies: []
      },
      {
        id: 3,
        author: {
          id: 4,
          name: '李XX',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        },
        content: '根据霍夫关键词whig propaganda在第二段定位，原文通过',
        createTime: '2024-06-23 16:45',
        likes: 0,
        isLiked: false,
        replies: [
          {
            id: 1,
            author: {
              id: 5,
              name: '王XX',
              avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            },
            content: '谢谢分享，很有帮助！',
            createTime: '2024-06-23 17:30',
            likes: 10,
            isLiked: false,
            replyTo: '李XX'
          }
        ]
      }
    ]
  });
  
  // 相关推荐
  const relatedPosts = ref([
    {
      id: 2,
      title: 'GRE备考经验分享：如何在一个月内提高10分',
      createTime: '2024-06-20 10:15',
      views: 1234
    },
    {
      id: 3,
      title: 'GMAT数学部分常见错误及解决方法',
      createTime: '2024-06-18 14:30',
      views: 2345
    },
    {
      id: 4,
      title: '商学院申请必备：GMAT vs GRE哪个更适合你？',
      createTime: '2024-06-15 09:45',
      views: 3456
    },
    {
      id: 5,
      title: '如何高效准备GMAT考试：时间管理技巧',
      createTime: '2024-06-10 16:20',
      views: 4567
    }
  ]);
  
  // 返回上一页
  const goBack = () => {
    router.back();
  };
  
  // 格式化日期
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    const now = new Date();
    const diff = now - date;
    
    // 小于1分钟
    if (diff < 60 * 1000) {
      return '刚刚';
    }
    // 小于1小时
    if (diff < 60 * 60 * 1000) {
      return `${Math.floor(diff / (60 * 1000))}分钟前`;
    }
    // 小于24小时
    if (diff < 24 * 60 * 60 * 1000) {
      return `${Math.floor(diff / (60 * 60 * 1000))}小时前`;
    }
    // 小于30天
    if (diff < 30 * 24 * 60 * 60 * 1000) {
      return `${Math.floor(diff / (24 * 60 * 60 * 1000))}天前`;
    }
    
    // 超过30天显示具体日期
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
  };
  
  // 点赞帖子
  const toggleLike = () => {
    if (!isLoggedIn.value) {
      ElMessage.warning('请先登录后再操作');
      return;
    }
    
    isLiked.value = !isLiked.value;
    if (isLiked.value) {
      post.value.likes++;
      ElMessage.success('点赞成功');
    } else {
      post.value.likes--;
      ElMessage.info('已取消点赞');
    }
  };
  
  // 收藏帖子
  const collectPost = () => {
    if (!isLoggedIn.value) {
      ElMessage.warning('请先登录后再操作');
      return;
    }
    
    isCollected.value = !isCollected.value;
    if (isCollected.value) {
      ElMessage.success('收藏成功');
    } else {
      ElMessage.info('已取消收藏');
    }
  };
  
  // 分享帖子
  const sharePost = () => {
    // 复制链接到剪贴板
    const url = window.location.href;
    navigator.clipboard.writeText(url).then(() => {
      ElMessage.success('链接已复制到剪贴板');
    }).catch(() => {
      ElMessage.error('复制失败，请手动复制');
    });
  };
  
  // 关注作者
  const toggleFollow = () => {
    if (!isLoggedIn.value) {
      ElMessage.warning('请先登录后再操作');
      return;
    }
    
    isFollowing.value = !isFollowing.value;
    if (isFollowing.value) {
      post.value.author.followers++;
      ElMessage.success('关注成功');
    } else {
      post.value.author.followers--;
      ElMessage.info('已取消关注');
    }
  };
  
  // 发送私信
  const sendMessage = () => {
    if (!isLoggedIn.value) {
      ElMessage.warning('请先登录后再操作');
      return;
    }
    
    ElMessage.success('私信功能开发中，敬请期待');
  };
  
  // 下载文件
  const downloadFile = (file) => {
    ElMessage.success(`开始下载: ${file.name}`);
    // 实际下载逻辑
    window.open(file.url, '_blank');
  };
  
  // 滚动到评论区
  const scrollToComments = () => {
    nextTick(() => {
      if (commentsSection.value) {
        commentsSection.value.scrollIntoView({ behavior: 'smooth' });
      }
    });
  };
  
  // 提交评论
  const submitComment = () => {
    if (!isLoggedIn.value) {
      ElMessage.warning('请先登录后再操作');
      return;
    }
    
    if (!commentContent.value.trim()) {
      ElMessage.warning('评论内容不能为空');
      return;
    }
    
    // 添加新评论
    post.value.comments.unshift({
      id: Date.now(),
      author: {
        id: 999, // 当前用户ID
        name: '当前用户',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      content: commentContent.value,
      createTime: new Date().toISOString(),
      likes: 0,
      isLiked: false,
      replies: []
    });
    
    // 清空评论框
    commentContent.value = '';
    ElMessage.success('评论发表成功');
  };
  
  // 点赞评论
  const likeComment = (index) => {
    if (!isLoggedIn.value) {
      ElMessage.warning('请先登录后再操作');
      return;
    }
    
    const comment = post.value.comments[index];
    comment.isLiked = !comment.isLiked;
    
    if (comment.isLiked) {
      comment.likes++;
    } else {
      comment.likes--;
    }
  };
  
  // 点赞回复
  const likeReply = (commentIndex, replyIndex) => {
    if (!isLoggedIn.value) {
      ElMessage.warning('请先登录后再操作');
      return;
    }
    
    const reply = post.value.comments[commentIndex].replies[replyIndex];
    reply.isLiked = !reply.isLiked;
    
    if (reply.isLiked) {
      reply.likes++;
    } else {
      reply.likes--;
    }
  };
  
  // 回复评论
  const replyComment = (index) => {
    if (!isLoggedIn.value) {
      ElMessage.warning('请先登录后再操作');
      return;
    }
    
    activeReplyIndex.value = index;
    activeReplyToIndex.value = -1;
    replyPlaceholder.value = `回复 ${post.value.comments[index].author.name}:`;
    replyContent.value = '';
  };
  
  // 回复其他回复
  const replyToReply = (commentIndex, replyIndex) => {
    if (!isLoggedIn.value) {
      ElMessage.warning('请先登录后再操作');
      return;
    }
    
    activeReplyIndex.value = commentIndex;
    activeReplyToIndex.value = replyIndex;
    const replyAuthor = post.value.comments[commentIndex].replies[replyIndex].author.name;
    replyPlaceholder.value = `回复 ${replyAuthor}:`;
    replyContent.value = '';
  };
  
  // 取消回复
  const cancelReply = () => {
    activeReplyIndex.value = -1;
    activeReplyToIndex.value = -1;
    replyContent.value = '';
  };
  
    // 提交回复
    const submitReply = () => {
    if (!isLoggedIn.value) {
      ElMessage.warning('请先登录后再操作');
      return;
    }
    
    if (!replyContent.value.trim()) {
      ElMessage.warning('回复内容不能为空');
      return;
    }
    
    const commentIndex = activeReplyIndex.value;
    const replyToIndex = activeReplyToIndex.value;
    
    let replyToName = post.value.comments[commentIndex].author.name;
    
    if (replyToIndex >= 0) {
      replyToName = post.value.comments[commentIndex].replies[replyToIndex].author.name;
    }
    
    // 添加新回复
    post.value.comments[commentIndex].replies.push({
      id: Date.now(),
      author: {
        id: 999, // 当前用户ID
        name: '当前用户',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      content: replyContent.value,
      createTime: new Date().toISOString(),
      likes: 0,
      isLiked: false,
      replyTo: replyToName
    });
    
    // 清空回复框并关闭
    replyContent.value = '';
    activeReplyIndex.value = -1;
    activeReplyToIndex.value = -1;
    ElMessage.success('回复发表成功');
  };

  // 跳转到登录页
  const goToLogin = () => {
    router.push('/login');
  };

  // 跳转到相关帖子
  const goToPost = (postId) => {
    router.push(`/forumDetail?id=${postId}`);
  };

  onMounted(() => {
    // 获取帖子详情数据
    const postId = route.query.id;
    if (postId) {
      // 这里应该是从API获取数据
      console.log('获取帖子ID:', postId);
      // 模拟API请求延迟
      setTimeout(() => {
        // 实际项目中这里应该是API请求
        console.log('帖子数据加载完成');
      }, 500);
    }
  });
</script>
<style scoped lang="scss">
// 提取公共变量
$primary-color: #126983;
$secondary-color: #18404B;
$text-color: #333;
$light-text-color: #666;
$border-color: #eee;
$background-color: #ecf4f2;
$card-background: #f9f9f9;
$border-radius: 8px;
$box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

.forum-detail-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: $background-color;
  min-height: 100vh;
}

.forum-detail-wrapper {
  width: 1200px;
  display: flex;
  gap: 20px;
}

.left-content {
  flex: 1;
  max-width: 850px;
}

.right-content {
  width: 330px;
}

.back-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 20px;
  color: $text-color;
  
  span {
    margin-left: 5px;
  }
  
  &:hover {
    color: $primary-color;
  }
}

.post-content-card {
  background-color: #fff;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  padding: 20px;
  margin-bottom: 20px;
}

.post-header {
  margin-bottom: 20px;
  border-bottom: 1px solid $border-color;
  padding-bottom: 15px;
}

.post-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 15px;
  color: $text-color;
  line-height: 1.4;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.post-author {
  display: flex;
  align-items: center;
  
  .author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .author-name {
    font-size: 16px;
    font-weight: 500;
    color: $text-color;
  }
}

.post-time {
  font-size: 14px;
  color: $light-text-color;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  
  .tag {
    background-color: rgba($primary-color, 0.1);
    color: $primary-color;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
  }
}

.post-content {
  font-size: 16px;
  line-height: 1.8;
  color: $text-color;
  margin-bottom: 20px;
  
  p {
    margin-bottom: 15px;
  }
  
  h3 {
    font-size: 18px;
    font-weight: 500;
    margin: 20px 0 15px;
  }
}

.post-files {
  margin-top: 30px;
  border-top: 1px solid $border-color;
  padding-top: 20px;
}

.files-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
  color: $text-color;
}

.file-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: $card-background;
  border-radius: $border-radius;
  border: 1px solid $border-color;
}

.file-info {
  display: flex;
  flex-direction: column;
}

.file-name {
  font-size: 14px;
  margin-bottom: 5px;
  color: $text-color;
}

.file-size {
  font-size: 12px;
  color: $light-text-color;
}

.post-actions {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
  border-top: 1px solid $border-color;
  margin-top: 20px;
  
  .action-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: $light-text-color;
    
    .el-icon {
      margin-right: 5px;
      font-size: 18px;
    }
    
    &:hover {
      color: $primary-color;
    }
    
    .liked {
      color: #f56c6c;
    }
    
    .collected {
      color: #e6a23c;
    }
  }
}

.comments-section {
  background-color: #fff;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  padding: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  color: $text-color;
}

.comment-input-container {
  margin-bottom: 30px;
}

.comment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.login-tip {
  font-size: 14px;
  color: $light-text-color;
  
  .login-link {
    color: $primary-color;
    cursor: pointer;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

.comment-list {
  margin-top: 20px;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid $border-color;
  
  &:last-child {
    border-bottom: none;
  }
}

.comment-author {
  display: flex;
  margin-bottom: 10px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-author-info {
  display: flex;
  flex-direction: column;
}

.comment-author-name {
  font-size: 16px;
  font-weight: 500;
  color: $text-color;
}

.comment-time {
  font-size: 12px;
  color: $light-text-color;
  margin-top: 3px;
}

.comment-content {
  font-size: 14px;
  line-height: 1.6;
  color: $text-color;
  margin: 10px 0;
  padding-left: 50px;
}

.comment-actions {
  display: flex;
  gap: 15px;
  padding-left: 50px;
  
  .action-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: $light-text-color;
    font-size: 14px;
    
    .el-icon {
      margin-right: 5px;
      font-size: 16px;
    }
    
    &:hover {
      color: $primary-color;
    }
    
    .liked {
      color: #f56c6c;
    }
  }
}

.reply-list {
  margin-top: 15px;
  padding-left: 50px;
}

.reply-item {
  background-color: $card-background;
  border-radius: $border-radius;
  padding: 15px;
  margin-bottom: 10px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.reply-author {
  display: flex;
  margin-bottom: 10px;
}

.reply-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.reply-author-info {
  display: flex;
  flex-direction: column;
}

.reply-author-name {
  font-size: 14px;
  font-weight: 500;
  color: $text-color;
}

.reply-time {
  font-size: 12px;
  color: $light-text-color;
  margin-top: 3px;
}

.reply-content {
  font-size: 14px;
  line-height: 1.6;
  color: $text-color;
  margin: 10px 0;
  
  .reply-to {
    color: $primary-color;
    margin-right: 5px;
  }
}

.reply-actions {
  display: flex;
  gap: 15px;
  
  .action-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: $light-text-color;
    font-size: 12px;
    
    .el-icon {
      margin-right: 5px;
      font-size: 14px;
    }
    
    &:hover {
      color: $primary-color;
    }
    
    .liked {
      color: #f56c6c;
    }
  }
}

.reply-input-container {
  margin-top: 15px;
  padding-left: 50px;
  
  .reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
  }
}

.no-comments {
  text-align: center;
  padding: 30px 0;
  color: $light-text-color;
  font-size: 14px;
}

.author-card {
  background-color: #fff;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  padding: 20px;
  margin-bottom: 20px;
}

.author-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  text-align: center;
}

.author-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.author-name-large {
  font-size: 18px;
  font-weight: 500;
  color: $text-color;
  margin-bottom: 10px;
}

.author-bio {
  font-size: 14px;
  color: $light-text-color;
  line-height: 1.5;
}

.author-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  padding: 15px 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 18px;
  font-weight: 500;
  color: $text-color;
}

.stat-label {
  font-size: 12px;
  color: $light-text-color;
  margin-top: 5px;
}

.author-actions {
  display: flex;
  gap: 10px;
  
  .el-button {
    flex: 1;
  }
}

.related-posts {
  background-color: #fff;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  padding: 20px;
}

.related-post-list {
  margin-top: 15px;
}

.related-post-item {
  padding: 10px 0;
  border-bottom: 1px solid $border-color;
  cursor: pointer;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:hover {
    .related-post-title {
      color: $primary-color;
    }
  }
}

.related-post-title {
  font-size: 14px;
  color: $text-color;
  margin-bottom: 5px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.related-post-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: $light-text-color;
}

// 响应式调整
@media (max-width: 1200px) {
  .forum-detail-wrapper {
    width: 100%;
    flex-direction: column;
  }
  
  .left-content {
    max-width: 100%;
  }
  
  .right-content {
    width: 100%;
  }
  
  .file-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .post-meta {
    flex-direction: column;
    align-items: flex-start;
    
    .post-time {
      margin-top: 5px;
    }
  }
  
  .post-actions {
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .comment-content,
  .comment-actions,
  .reply-list {
    padding-left: 0;
  }
  
  .reply-input-container {
    padding-left: 0;
  }
}
</style>